<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-17 11:15:06
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-10-20 14:39:12
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <!-- 顶部搜索 -->
    <view class="header">
      <!-- 搜索条 -->
      <view class="search">

        <!-- 类型选择 -->
        <view class="select_type">
          <picker mode="selector" class="selector" :range="typeRange" range-key="label" @change="selector_type($event)">

            <view>{{ searchObject.label }}
              <view class="cuIcon-unfold" />
            </view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 内容展示区域 -->
    <view class="main">

      <!-- // todo 根据 实配 === 应配 来决定左侧标记 显示红蓝 enough:配齐 scarce:未配齐-->
      <view class="card_equimpent " v-for="(list, index) in equipmentShowList"
        :class="list.count < list.number ? 'scarce' : 'enough'" :key="index">
        <view class="title">{{ list.name }}</view>

        <!-- 数量展示 -->
        <view class="count">
          <view>
            <view class="number">{{ list.number }}</view>
            <view>应配数量</view>
          </view>

          <view>
            <view class="number">{{ list.count }}</view>
            <view>实配数量</view>
          </view>
        </view>

        <view class="foldPane">
          <equipment-info :imageId="list.id" :agencyId="agencyId" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import equipmentInfo from './components/equipmentInfo.vue'
export default {
  components: { equipmentInfo },
  data() {
    return {
      // 导航栏参数
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: "设备配备详情信息"
        }
      },
      searchObject: {
        label: '所有设备',
        value: '4'
      },
      typeRange: [
        { label: '消防技术服务基础设备', value: '1' },
        { label: '消防设施维护保养检测设备配备', value: '2' },
        { label: '消防安全评估设备配备', value: '3' },
        { label: '所有设备', value: '4' }
      ],
      foldStatus: false,// 子分类是否展开, true为展开

      equipmentList: [], // 设备所有列表数据
      equipmentShowList: [], // 设备展示列表数据
      agencyId: null,
    }
  },
  onLoad(event) {
    if (event.agencyId) {
      this.agencyId = event.agencyId
      this.getInfoMation(event.agencyId)
    }
  },
  methods: {
    // 获取详情数据
    getInfoMation(id) {
      let that = this
      this.$store
        .dispatch("organizeInfo_form", id)
        .then(({ data }) => {
          that.equipmentList = data.dictDeviceTypes
          that.equipmentShowList = that.sorting(data.dictDeviceTypes)
        });
    },
    // 查询匹配的数据信息
    filterList(type, data) {
      return data.filter(item => {
        return item.dictCode == type
      })
    },
    // 机构类别选择
    selector_type(e) {
      let that = this
      this.searchObject.value = this.typeRange[e.detail.value].value
      this.searchObject.label = this.typeRange[e.detail.value].label
      if (that.searchObject.value == '4') {
        that.equipmentShowList = that.sorting(that.equipmentList)
      } else {
        let oldList = that.filterList(that.searchObject.value, that.equipmentList)
        that.equipmentShowList = that.sorting(oldList)
      }
    },

    // 排序算法，将未配齐的数据排前面
    sorting(list) {
      let allList = []
      let standardList = []
      let noStandardList = []
      list.forEach(item => {
        if (item.count < item.number) noStandardList.push(item)
        else standardList.push(item)
      })
      allList = [...noStandardList, ...standardList]
      return allList
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./styles/equipment.scss";
@import "./styles/foldForm.scss";
</style>